<template>
  <div>
    <div class="box-l">
      <img :src="this.$route.query.thisid.tupian" alt />
    </div>
    <div class="content">
      <div class="box-c">
        <h2>{{this.$route.query.thisid.name}}</h2>
        <h3>{{this.$route.query.thisid.jifen}}</h3>
      </div>
      <div class="quanyi">
        <h5>权益说明</h5>
        <p>本网站所提供的信息仅供参考之用,并不代表本网赞同其观点，也不代表本网对其真实性负责。您若对该稿件内容有任何疑问或质疑，请尽快与上海热线联系，本网将迅速给您回应并做相关处理。联系方</p>
      </div>
      <button class="btn" @click="fn()">兑换积分</button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import { Dialog } from "vant";
Vue.use(Dialog);
export default {
  methods: {
    fn() {
      Dialog.confirm({
        title: "确定兑换吗",
        message: "是否使用积分兑换",
      });
      Toast("积分不足");
    },
  },
};
</script>
<style scoped>
.box-l {
  width: 100%;
  height: 280px;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
}
.content {
  padding: 0 20px;
}
.box-l img {
  width: 278px;
  height:180px;
  align-self: center;
}
.box-c {
  height: 80px;
  border-bottom: 1px solid #ccc;
}
.box-c h2 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 25px;
}
.box-c h3 {
  color: red;
  font-weight: 600;
  margin-top: 10px;
}
.quanyi h5 {
  font-size: 17px;
  font-weight: 600;
  margin: 15px 0;
}
.quanyi p {
  font-size: 14px;
  line-height: 20px;
  color: #777;
}
.btn {
  width: 100%;
  height: 48px;
  background: #4370ed;
  border: none;
  color: #fff;
  margin-top: 45px;
}
</style>